<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>redux手动实现</title>
</head>
<body>
  <button id="plus">+1</button>
  <span id="count">0</span>
  <button id="minus">-1</button>
  <script type="module">
    import createStore, { applyMiddleware, bindActionCreators, combineReducers } from './redux/index.js';
    import { actionCreators, enhancer, reducer, middlewares } from './store/index.js';

    const rootReducer = combineReducers({ count: reducer });
    const { logger, thunk } = middlewares;

    const store = createStore(rootReducer, applyMiddleware(logger, thunk));
    
    const plus = document.getElementById('plus');
    const minus = document.getElementById('minus');
    const count = document.getElementById('count');

    // 订阅事件，状态变更时更新count
    store.subscribe(function () {
      count.innerHTML = store.getState().count;
    });

    // 将actionCreator转化为dispatch方法的调用
    const actions = bindActionCreators(actionCreators, store.dispatch);

    // 触发dispatch
    plus.onclick = function() {
      // store.dispatch({ type: 'increment' });
      store.dispatch(({ dispatch }) => {
        setTimeout(() => {
          actions.increment();
        }, 1000);
      });
    };

    // 触发dispatch
    minus.onclick = function() {
      // store.dispatch({ type: 'decrement' });
      store.dispatch(({ dispatch }) => {
        setTimeout(() => {
          actions.decrement();
        }, 1000);
      });
    };
  </script>
</body>
</html>